<template>
  <a-card class="card">
    <a-tabs default-active-key="published" @change="changeTab">
      <a-tab-pane key="published" tab="已发布">
        <div class="publish-home-header">
          <div
            v-for="(item, index) in tabsList"
            :key="item.id"
            class="header-tabs"
            :class="item.state ? 'header-tabs-active' : null"
            @click="typeTabsChange(index, item.id)"
          >
            {{ item.name }}
          </div>
        </div>
        <!-- 已发布列表-->
        <information-list
          v-if="isDraft === 0"
          ref="pictureRef"
          :is-draft="0"
          :release-type="modularValue"
          @powerEmits="getData"
        ></information-list>
      </a-tab-pane>
      <a-tab-pane key="draft" tab="草稿箱" force-render>
        <div class="publish-home-header">
          <div
            v-for="(item, index) in tabsList"
            :key="item.id"
            class="header-tabs"
            :class="item.state ? 'header-tabs-active' : null"
            @click="draftChange(index, item.id)"
          >
            {{ item.name }}
          </div>
        </div>
        <!-- 草稿箱列表-->
        <information-list
          v-if="isDraft === 1"
          ref="getFromMySons"
          :is-draft="1"
          :draft-type="draftValue"
        ></information-list>
      </a-tab-pane>
    </a-tabs>
    <a-tooltip
      v-if="isDraft === 0"
      overlay-class-name="release-information-tooltip-container"
      placement="bottomRight"
    >
      <template #title>
        <div class="tooltip-custom-container">
          <div class="row-item" @click="toContent">
            <img class="info-type-icon" src="../../assets/images/icon_neirong.png" alt="" />
            按照内容发布
          </div>
          <div class="row-item" @click="toEquipment">
            <img class="info-type-icon" src="../../assets/images/icon_weizhi.png" alt="" />
            按照展示位置发布
          </div>
        </div>
      </template>
      <a-button class="postInfo" type="primary">发布信息</a-button>
    </a-tooltip>
    <a-tooltip
      v-else
      overlay-class-name="release-information-tooltip-container draft"
      placement="bottomRight"
    >
      <template #title>
        <div class="tooltip-custom-container">
          <div class="row-item" @click="goCreateDraftPage(1)">
            <img class="info-type-icon" src="../../assets/images/icon_tupian.png" alt="" />
            图像
          </div>
          <div class="row-item" @click="goCreateDraftPage(3)">
            <img class="info-type-icon" src="../../assets/images/icon_wenzhang.png" alt="" />
            文章
          </div>
        </div>
      </template>
      <a-button class="postInfo" type="primary">创作草稿</a-button>
    </a-tooltip>
  </a-card>
</template>
<script setup>
import InformationList from './information/information-list';
import { useRouter } from 'vue-router';
import { ref, reactive, defineEmits, computed } from 'vue';
import { useStore } from 'vuex';
const store = useStore();
const router = useRouter();
const isDraft = ref(0);
const pictureRef = ref(null);
function toContent() {
  store.commit('removeCacheRoute', 'postion'); // 存储keepalive数值
  store.commit('removeCacheRoute', 'postMessage');
  store.commit('removeCacheRoute', 'article');
  store.commit('removeCacheRoute', 'imgAndVideo');
  router.push({
    path: '/post-message'
    // query: {
    //   new: 'new'
    // }
  });
}
function toEquipment() {
  store.commit('removeCacheRoute', 'postion'); // 存储keepalive数值
  store.commit('removeCacheRoute', 'postMessage');
  store.commit('removeCacheRoute', 'article');
  store.commit('removeCacheRoute', 'imgAndVideo');
  router.push({
    path: '/position',
    query: {
      state: '设备'
    }
  });
}

function changeTab(value) {
  modularValue.value = '';
  draftValue.value = '';
  tabsList.forEach((item, idx) => {
    item.state = idx === 0;
  });
  if (value === 'draft') {
    isDraft.value = 1;
    getFromMySons?.value?.resetFn();
  } else {
    isDraft.value = 0;
    pictureRef?.value?.resetFn();
  }
}
const emits = defineEmits(['childValues']);
function getData(data) {
  emits('childValues', data);
}
const getFromMySons = ref(); // 接收子组件传递过来的参数和方发
let modularValue = ref(''); // tab发布
let draftValue = ref(''); // tab草稿
// / tab类型
const tabsList = reactive([
  {
    name: '全部',
    id: '',
    state: true
  },
  // {
  //   name: '视频',
  //   id: 0,
  //   state: false
  // },
  // {
  //   name: '组图',
  //   id: 1,
  //   state: false
  // },
  {
    name: '图像',
    id: '1',
    state: false
  },
  // {
  //   name: '文档',
  //   id: 2,
  //   state: false
  // },
  {
    name: '文章',
    id: '3',
    state: false
  }
]);
// tab类型(已发布)
function typeTabsChange(index, id) {
  modularValue.value = id; // "" 全部； 0视频； 1 组图；2 文档； 3文章
  tabsList.forEach((item, idx) => {
    item.state = idx === index;
  });
  // pictureRef.value.resetFn();
}
// tab类型(草稿)
function draftChange(index, id) {
  getFromMySons.value.onIsAllChecked(); // 执行父组件的方法
  draftValue.value = id; // "" 全部； 0视频； 1 组图；2 文档； 3文章
  tabsList.forEach((item, idx) => {
    item.state = idx === index;
  });
  // getFromMySons.value.resetFn();
}

// 创建草稿跳转
function goCreateDraftPage(type) {
  let path = type === 1 ? '/post-message/imgAndVideo' : '/post-message/article';
  router.push({
    path,
    query: {
      type: 'creatDraft', // 创作草稿
      activeState: type * 1 === 1 ? 0 : 1
    }
  });
}
</script>
<style lang="less" scoped>
@import './index.less';
</style>
<style lang="less">
// 发布信息tooltip样式
.release-information-tooltip-container {
  padding-top: 0;
  .micro-ant-tooltip-arrow {
    display: none;
  }
  .micro-ant-tooltip-inner {
    padding: 8px 6px;
    background: #ffffff;
    border-radius: 6px;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
    color: rgba(0, 0, 0, 0.6);
    font-size: 14px;
    .tooltip-custom-container {
      .row-item {
        display: flex;
        align-items: center;
        padding: 0 14px;
        min-width: 88px;
        height: 44px;
        border-radius: 4px;
        cursor: pointer;
        &:hover {
          background: #f5f6f7;
          color: rgba(0, 0, 0, 0.8);
        }
        .info-type-icon {
          width: 32px;
          margin-right: 8px;
        }
      }
    }
  }
  &.draft {
    .info-type-icon {
      width: 20px !important;
    }
  }
}
/deep/ .micro-ant-select-selector {
  box-shadow: 0 0 0 2px var(--themecolor02) !important;
}
</style>
